<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax重复发送请求问题</title>
</head>
<body>
<button class="send">发送请求</button>
<script>
    const send=document.querySelector('.send')
    let xhr=null
    //标识变量
    let isSending=false
    send.addEventListener('click',function () {
        if (isSending) xhr.abort()  //如果正在发送,则取消掉之前的请求,重新发一个新的
        xhr = new XMLHttpRequest()
        isSending=true
        xhr.open('GET','http://localhost:8000/timeout')
        xhr.send()

        xhr.onreadystatechange=function () {
            if (xhr.readyState===4){
                isSending=false
                if (xhr.status>=200&&xhr.status<300){
                    document.querySelector('div').innerHTML=`${xhr.response}`
                }
            }

        }
    })

</script>
</body>
</html>